<template>
  <v-layout type="main">
    <el-steps v-if="active != 9" :active="active" simple class="my-steps">
      <el-step title="基本信息" icon="el-icon-edit"></el-step>
      <el-step title="导入数据" icon="el-icon-upload"></el-step>
      <el-step title="完成" icon="el-icon-picture"></el-step>
    </el-steps>
    <div class="detail-layout">
      <el-form ref="form" :model="formData" :rules="submitRules" label-width="120px" class="alick-add-form">
        <div v-if="active == 1 || active == 9">
          <el-form-item label="范围" prop="visibility">
            <el-radio-group v-model="formData.visibility">
              <el-radio :label='0'>私有的</el-radio>
              <el-radio :label='1'>共享的</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input type="text" v-model="formData.name" />
          </el-form-item>
          <el-form-item label="挂载路径" prop="alias">
            <el-input type="text" v-model="formData.alias" />
          </el-form-item>
          <el-form-item label="数据类型">
            <el-select v-model="formData.file_type" style="width:100%;" :popper-append-to-body="false" filterable
              allow-create popper-class="select-popper" placeholder="请选择">
              <el-option v-for="item in dataType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="配图">
            <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="formData.avatar" @avatarPath="avatarPath" />
          </el-form-item>
          <!-- <el-form-item label="分类">
            <el-select v-model="formData.label">
              <el-option v-for="(e, i) in labelTypeMaps" :value="e.label" :label="e.value" :key="i">
              </el-option>
            </el-select> 
          </el-form-item> -->
          <el-form-item label="描述" prop="desc">
            <el-input type="textarea" :rows="3" v-model="formData.desc" />
          </el-form-item>


        </div>
        <div v-if="active == 2 || active == 9">
          <el-form-item label="数据来源" v-if="s3_flag" prop="file_source">
            <el-radio-group v-model="formData.file_source">
              <el-radio :label='1'>本地上传</el-radio>
              <el-radio :label='2'>S3接入</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label=" " prop=" " v-if="formData.file_source == 1">
            <wrapUploader @succeedOver="succeedOver" type="dataset" :taskId="path" :biz_id="bizId" />
          </el-form-item>
          <el-form-item label=" " prop=" " v-if="formData.file_source == 2">
            <div class="outin-box">
              <div class="outin-input">
                <div class="outin-input-name">
                  <span class="outin-input-name-title">bucket名称</span>
                  <!-- <el-select size="mini" v-model="formData.s3_type" @change="changeS3Type">
                    <el-option :value='0' label="私用" />
                    <el-option :value='1' label="共享" />
                  </el-select> -->
                  <el-select v-model="formData.s3_access_id">
                    <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
                    </el-option>
                  </el-select>
                </div>
                <span class="outin-input-name-title">路径</span>
                <el-input v-model="formData.s3_path" class="entrance" />
              </div>
            </div>
          </el-form-item>
        </div>
        <div v-show="active == 3">
          <p class="succeed-hit" v-if="$route.query.id">数据集修改成功</p>
          <p class="succeed-hit" v-else>数据集创建成功</p>
          <div class="succeed-btn">
            <a href="javascript:;" @click="toDetail">立即前往</a>
          </div>
        </div>
        <el-form-item label=" ">
          <el-button class="none-type" @click="addDataSet1" type="primary" v-if="active == 1">下一步</el-button>
          <el-button class="none-type" @click="back" v-if="active == 2">上一步</el-button>
          <el-button class="none-type" @click="submit" type="primary" v-if="active == 2">确定</el-button>
          <el-button class="none-type" @click="updateSubmit" v-if="active == 9">确定</el-button>
        </el-form-item>

      </el-form>
    </div>
  </v-layout>
</template>

<script>
import { dataType, labelTypeMaps } from '@/utils/maps'
import { addDataSet, putDataSet, getDataSetDetail } from '@/api/dataset'
import { getAllAssetS3 } from '@/api/inout'
import { paramMap } from '@/utils/maps'
export default {
  data() {
    return {
      s3_flag: paramMap['s3_flag'],
      active: 1,
      formData: { file_source: 1, visibility: 0, label: '图像识别' },
      submitRules: {
        name: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
        ],
        alias: [
          { required: true, min: 5, max: 25, message: "长度在5到25个字符" },
        ],
        desc: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
        ],
        data_type: [
          { required: true, message: "数据类型不能为空" },
        ],
      },
      dataType,
      labelTypeMaps,
      dataSet: {},
      path: this.$route.query.id,
      bizId: this.$route.query.id,
      s3Options: []
    };
  },
  async created() {
    this.getDetail()
    this.getS3()
  },
  mounted() { },
  destroyed() { },
  methods: {
    /**
      * 添加数据集
    */
    addDataSet1() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.$route.query.id || this.dataSet.id) {
            if (this.$route.query.id || this.dataSet.id) {
              this.active = 2;
            }
          } else {
            let res = await addDataSet(this.formData);
            this.dataSet = res.data
            this.bizId = res.data.id
            if (res && res.data) {
              this.active = 2;
            }
          }
        }
      })

    },

    avatarPath(data) {
      this.formData.avatar = data;
    },
    /**
     * 提交数据集
     */
    async submit() {
      console.log(this.formData)
      console.log(this.dataSet)
      console.log({ ...this.dataSet, ...this.formData })
      await putDataSet({ ...this.dataSet, ...this.formData })
      this.active = 3;
    },
    async updateSubmit() {
      await putDataSet({ ...this.dataSet, ...this.formData })
      this.toDetail()
    },
    async getS3() {
      let res = await getAllAssetS3()
      this.s3Options = res.data

    },
    back() {
      this.active = 1
    },
    toDetail() {
      let query = {
        id: this.dataSet.id
      }
      if (this.$route.query.id) {
        query = {
          id: this.$route.query.id
        }
      }
      this.$router.push({
        path: '/dataset/code',
        query
      })
    },
    async getDetail() {
      if (this.$route.query.id) {
        let res = await getDataSetDetail(this.$route.query.id)
        this.formData = res.data
        this.active = 9
      }
      console.log('formData', this.formData)
    },
    succeedOver(data) {
      console.log(data)
    },

  },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";

.el-form {
  margin-top: 20px;
}

.succeed-hit {
  text-align: center;
  line-height: 120px;
  font-size: 28px;
  font-weight: bold;
  padding-top: 80px;
}

.succeed-btn {
  width: 120px;
  margin: 40px auto 0;

  a {
    display: block;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    background: #409EFF;
    color: #FFF;
  }
}
</style>